<template>
	<u-popup :show="show" :round="16" mode="bottom" @close="show = false">
		<view class="contentIconBox" @click="show = false">
			<img class="contentIcon" src="@/static/home/contentIcon.png" alt="">
		</view>
		<view class="contentInputBox">
			<input class="contentInput" v-model="searchData" placeholder="搜索您想拍摄的尺寸/使用场景"
				@input="queryTabDataByName()" />
			<image class="contentInputIcon icon-24" src="/static/home/search.png" mode="aspectFit"></image>
		</view>
		<view class="contentType_swiper">
			<uni-swiper-dot class="swiper_dot" :info="showList" :dotsStyles="{
			backgroundColor: '#E5E5E5',
			selectedBackgroundColor: '#A6A6A6',
			selectedBorder: 'none',
			border: 'none',
			bottom: 0,
			width: 8,
			height: 8,
		}" :current="swiperCurrent" mode="dot">
				<swiper class="swiper" :current="swiperCurrent" @change="onSwiperChange">
					<swiper-item v-for="(item, index) in showList" :key="index">
						<view class="swiperGrid"
							style="display: grid;grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(2, 1fr);grid-gap: 40rpx 20rpx;">
							<view v-for="(itm, idx) in item" :key="idx" style="text-align: center;"
								@tap="onTabChange(index+'-'+idx, itm)">
								<image class="item-img"
									:src="`/static/category/${(!searchData && currentRef===(index+'-'+idx)) ? itm.imageNameActive : itm.imageName}`">
								</image>
								<view style="
			          margin-top: 16rpx;
			          font-size: 28rpx;
			          font-weight: 400;
			          letter-spacing: 0;
			          color: rgba(56, 56, 56, 1);
			          text-align: center;">
									{{ itm.name }}
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>

		</view>
		<view class="currentList_header">
			<image v-if="!searchData" src="../../../static/home/icon4.png" alt=""></image>
			<image v-else src="../../../static/home/search-res-text.png" alt=""></image>
		</view>
		<scroll-view class="currentList" :scroll-y="true" @scrolltolower="scrolltolower"
			:scroll-into-view="scrollAnchorId">
			<template v-if="currentList.length">
				<view class="classify-list">
					<view id="top-anchor"></view>
					<view v-for="(item, index) in currentList" :key="index" @tap="toMakePhoto(item)">
						<view class="list-item flex-between-center">
							<view class="left">
								<image class="poster" src="/static/home/currentIemIcon.png"></image>
							</view>
							<view class="center">
								<view class="center-top">
									<text class="title-content">{{item.name}}
										<image class="hot-icon" v-if="item.hot" src="../../../static/home/icon5.svg">
										</image>
									</text>
								</view>
								<!-- 自定义 -->
								<view v-if="item.width === 0" class="center-bottom">
									<text>自定义照片</text>
								</view>
								<view v-else class="center-bottom">
									<text class="center-bottom-item">{{item.widthPixel}}*{{item.heightPixel}}px</text>
									<view class="split-col-short"></view>
									<text class="center-bottom-item">{{item.width}}*{{item.height}}mm</text>
									<view class="split-col-short"></view>
									<text class="center-bottom-item">{{item.minSize}}-{{item.maxSize}}kb</text>
								</view>
							</view>
						</view>

					</view>
					<u-loadmore :status="status" />
				</view>
			</template>
			<template v-else>
				<view class="flex-center">
					<text class="gray-text">尚未搜到结果，你可以</text>
					<view class="custom-button ml-10" @tap="toCustomPhoto">
						<u-button type="primary" shape="circle" text="自定义寸照"></u-button>
					</view>

				</view>
			</template>
		</scroll-view>
	</u-popup>
</template>

<script setup>
	import {
		ref,
		onMounted,
		computed
	} from 'vue'
	import uScrollList from '../../../uni_modules/uview-plus/components/u-scroll-list/u-scroll-list.vue';
	onMounted(() => {
		getClassifyList();
	})
	let scrollAnchorId = ref('');
	let show = ref(false);
	let searchData = ref('');
	let tabList = ref([]);
	let currentRef = ref('0-0')
	let pageNo = ref(1);
	let total = ref(1);
	let pageSize = ref(10);
	let currentList = ref([]);
	let currentTypeId = ref(null);
	const status = ref('loadmore');

	const swiperCurrent = ref(0);

	const onSwiperChange = (e) => {
		swiperCurrent.value = e.target.current;
	}
	const showList = computed(() => {
		let list = [];
		for (let item of tabList.value) {
			let data = {
				...item,
				imageName: item.imageUrl.replace('.svg', '') + '.png',
				imageNameActive: item.imageUrl.replace('.svg', '') + '-active.png',
			};
			if (list.length == 0) {
				list.push([data]);
			} else if (list[list.length - 1].length < 8) {
				list[list.length - 1].push(data);
			} else {
				list.push([]);
				list[list.length - 1].push(data);
			}
		}
		return list
	})

	const getClassifyList = async (index) => {
		try {
			// 接口是分页的，查所有（不超过30）
			let res = await uni.$request('/api/busi/photoClass/select', {
				pageNo: 1,
				pageSize: 30,
			});
			console.log('获取证件照分类', res.data.photoClassList)
			tabList.value = res.data.photoClassList;
			currentTypeId.value = res.data.photoClassList.length ? res.data.photoClassList[0].id : null;
			if (currentTypeId.value) {
				queryTabData();
			}
		} catch (e) {
			//TODO handle the exception
			// uni.$u.toast('分类数据失败');
			// throw Error('分类数据失败');
		}
	}
	const queryTabData = async (isLoadMore = false) => {
		try {
			status.value = 'loading';
			// 下一页
			const _pageNo = isLoadMore ? pageNo.value + 1 : 1;
			// 接口是分页的
			let res = await uni.$request('/api/busi/product/select/byClassId', {
				classId: currentTypeId.value,
				pageNo: _pageNo,
				pageSize: pageSize.value,
			});
			pageNo.value = _pageNo;
			total.value = res.data.total;
			currentList.value = [...(isLoadMore ? currentList.value : []), ...res.data.productList];
			status.value = currentList.value.length === res.data.total ? 'nomore' : 'loadmore';
		} catch (e) {
			status.value = 'loadmore';
			uni.$u.toast('数据加载失败');
		}
	}
	const queryTabDataByName = async (isLoadMore = false) => {
		if (!searchData.value || !searchData.value.trim()) {
			pageNo.value = 1;
			queryTabData();
			return
		}
		status.value = 'loading';
		if (!isLoadMore) {
			pageNo.value = 1;
		}
		try {
			// 下一页
			const _pageNo = isLoadMore ? pageNo.value + 1 : 1;
			// 接口是分页的
			let res = await uni.$request('/api/busi/product/select/byname', {
				name: searchData.value,
				pageNo: _pageNo,
				pageSize: pageSize.value,
			});
			pageNo.value = _pageNo;
			total.value = res.data.total;
			currentList.value = [...(isLoadMore ? currentList.value : []), ...res.data.productList];
			status.value = currentList.value.length === res.data.total ? 'nomore' : 'loadmore';
		} catch (e) {
			status.value = 'loadmore';
			uni.$u.toast('数据加载失败');
		}
	}
	const scrollToTop = () => {
		scrollAnchorId.value = 'top-anchor';
		setTimeout(() => {
			scrollAnchorId.value = '';
		})
	}

	const onTabChange = (index, data) => {
		scrollToTop();
		if (searchData.value) {
			searchData.value = '';
		} else if (currentRef.value == index) {
			return
		}
		currentRef.value = index;
		pageNo.value = 1;
		currentTypeId.value = data.id;
		queryTabData();
	}
	const toMakePhoto = (item) => {
		uni.navigateTo({
			url: item.width === 0 ? '/pages/make-photo/custom-photo' :
				`/pages/make-photo/make-photo?id=${item.id}`
		})
	};
	const scrolltolower = () => {
		if ((pageNo.value * pageSize.value) < total.value) {
			if (searchData.value) {
				queryTabDataByName(true);
			} else {
				queryTabData(true);
			}
		}
	}
	const toCustomPhoto = () => {
		uni.navigateTo({
			url: '/pages/make-photo/custom-photo'
		})

	};
	defineExpose({
		show
	})
</script>

<style lang="less" scoped>
	.contentIconBox {
		text-align: center;

		.contentIcon {
			width: 28rpx;
			height: 16rpx;
		}
	}

	.contentInputBox {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		padding: 40rpx 0;
	}

	.contentInput {
		display: inline-block;
		width: 90%;
		box-sizing: border-box;
		height: 48px;
		padding: 4% 4% 4% 10%;
		border-radius: 16rpx;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(229, 229, 229, 1);
	}

	.contentInputIcon {
		position: absolute;
		top: 50%;
		left: 8%;
		transform: translateY(-50%);
	}

	.contentType_swiper /deep/.uni-swiper__warp {
		padding-bottom: 56rpx;

		.uni-swiper__dots-box {
			margin-right: 0;
			justify-content: center !important;
		}
	}

	.item-img {
		width: 96rpx;
		height: 96rpx;
	}

	.currentList_header {
		margin-top: 40rpx;
		padding: 20rpx 32rpx 20rpx;
		width: 64px;
		height: 20px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.currentList {
		max-height: 508rpx;
		padding: 0 32rpx;
	}

	.currentItem {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 34rpx;

		.currentItem_icon {
			width: 96rpx;
			height: 102rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.currentItem_content {
		width: calc(100% - 96rpx - 32rpx);

		.currentItem_contentT1 {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size: 16px;
			font-weight: 500;
			letter-spacing: 0px;
			line-height: 23.17px;
			color: rgba(56, 56, 56, 1);

			image {
				margin-left: 8px;
				width: 28rpx;
				height: 28rpx;
			}
		}

		.currentItem_contentT2 {
			margin-top: 20rpx;
			font-size: 24rpx;
			font-weight: 400;
			letter-spacing: 0px;
			color: rgba(166, 166, 166, 1);
		}
	}

	.classify-list {
		// padding: 20rpx 32rpx 20rpx 32rpx;
		justify-content: flex-start;

		.list-item {
			// margin-bottom: 20rpx;
			// border-radius: 16rpx;
			// box-shadow: 0px 2rpx 4rpx rgba(0, 0, 0, 0.02);

			padding: 32rpx 0;
			border-bottom: 1px solid #f5f5f5;

			.left {
				width: 96rpx;
				height: 102rpx;
				margin-right: 32rpx;

				.poster {
					width: 96rpx;
					height: 102rpx;
				}
			}

			.center {
				width: 100%;
				height: 96rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.center-top {
				font-size: 28rpx;
				font-weight: 500;
				letter-spacing: 0;
				line-height: 42rpx;
				color: rgba(0, 0, 0, 1);

				.title-content {
					position: relative;
				}

				.hot-icon {
					width: 28rpx;
					height: 28rpx;
					margin-left: 8rpx;
				}
			}

			.center-bottom {
				width: 100%;
				font-size: 24rpx;
				font-weight: 400;
				letter-spacing: 0;
				line-height: 36rpx;
				color: rgba(166, 166, 166, 1);

				.center-bottom-item {
					width: 150rpx;
					text-align: center;
					display: inline-block;
				}
			}
		}


	}
</style>